<template>
  <div class="chart" :style="{ height: '320px', width: '100%'}">
  </div>
</template>

<script>
import echarts from '@/utils/echarts'
// require('echarts/theme/macarons') // echarts theme
import resize from './resize.js'

export default {
  mixins: [resize],
  props: ['chartData'],
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      // this.chart = echarts.init(this.$el, 'macarons')
      this.chart = echarts.init(this.$el)
    }
  },
  watch:{
    chartData:function(chartData){
      // console.log("折线图数据:", chartData);
      let xAxisData = [];
      let data1 = [];
      let data2 = [];
      chartData.map(v => {
        xAxisData.push(v.month)
        data1.push(v.saleTotal)
        data2.push(v.insTotal)
      })
      let options = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [ '销售数据', '安装数据'],
          textStyle: {  // 图列内容样式
            color: '#fff',  // 字体颜色
          },
          top: '8%',
          left: '60%',
          axisLabel:{
            interval: 4,
          }
        },
        grid: {
          left: '3%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        //工具框，可以选择
        toolbox: {
          top: '2%',
          right: '5%',
          feature: {
            saveAsImage: {} //下载工具
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine:{
            show: true, //显示Y轴
            lineStyle: {
              color: '#0082F6'
            }
          },
          // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          data: xAxisData
        },
        yAxis: {
          type: 'value',
          min: 0,
          // max: 1000, // 强行设置最大值，可以达到上方留白的效果
          axisLine:{
            show: true, //显示Y轴
            lineStyle: {
              color: '#0082F6'
            }
          },
          //  splitNumber: 4, // 想要分隔的段数
        },
        series: [
          {
            name: '销售数据',
            type: 'line',
            // stack: '总量',
            smooth: true,
            icon: "line",
            itemStyle: {
              color: "#27E9CB" //线条的颜色
            },
            // data: [120, 132, 101, 134, 90, 230, 210, 100, 200, 400, 600, 500],
            data: data1
          },
          {
            name: '安装数据',
            type: 'line',
            // stack: '总量',
            smooth: true,
            icon: "line",
            itemStyle: {
              color: "#1EB0FC"
            },
            // data: [220, 182, 191, 234, 290, 330, 310, 120, 210, 102, 350, 670],
            data: data2
          }
        ]

      }
       this.chart.setOption(options)
    }
  }
}
</script>
